<template>
	<view class="flex desc-wrap" :style="getStyle()">
		<view class="text-grey2 desc-label" :style="labelStyle">{{label}}</view>
		<view class="flex-1 desc-value" :style="valueStyle">{{value}}</view>
	</view>
</template>

<script>
	export default {
		name:"bg-desc",
		props:{
			"label":String, 
			"value":[String, Number], 
			"between":String, 
			"center":String, 
			"labelStyle":{default: ()=>({})}, 
			"valueStyle":{default: ()=>({})}, 
		},
		data() {
			return {
				
			};
		},
		methods:{
			getStyle(){
				return {'algin-items':this.center?'center':'start','justify-content':this.between?'space-between':'flex-start'}
			}
		}
	}
</script>

<style>
.desc-wrap{
	margin-bottom:16rpx;
}
.desc-wrap:last-child{
	margin-bottom:0rpx;
}
.desc-label {
	min-width: 200rpx;
}
.desc-value {
	max-width: 450rpx;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-all;
	padding-left: 20rpx;
	box-sizing: border-box;
}
</style>